<template>
	<div id="index">
		<el-container>
			<el-header style="
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 999;
          padding: 0;
        ">
				<menu-bar> </menu-bar>
			</el-header>
			<el-main style="padding: 0">
				<div style="height: 60px"></div>
				<div style="max-width: 1400px; margin: auto; ">

<!--          <div style="margin: 40px 0">-->
<!--            <el-divider>-->
<!--              <p style="font-weight: 500; font-size: 28px">-->
<!--                热门-->
<!--              </p>-->
<!--            </el-divider>-->
<!--          </div>-->

          <div style="margin: 40px 0">
            <el-tabs v-model="category" @tab-click="handleClick">
              <el-tab-pane label="全部" name="0"></el-tab-pane>
              <el-tab-pane label="饮食起居" name="1"></el-tab-pane>
              <el-tab-pane label="风俗习惯" name="2"></el-tab-pane>
              <el-tab-pane label="节日庆典" name="3"></el-tab-pane>
              <el-tab-pane label="文化艺术" name="4"></el-tab-pane>
            </el-tabs>


          </div>

          <!--            热门文章展示-->
          <el-row :gutter="50">
            <el-col :span="6" v-for="a in articles" :key="a.index" v-loading="loading">
              <article-card :article="a"></article-card>
            </el-col>
          </el-row>
				</div>
			</el-main>
			<!-- 页脚 -->
			<el-footer style="padding: 0">
<!--				<page-footer></page-footer>-->
			</el-footer>
		</el-container>
	</div>
</template>

<script>
import MenuBar from '@/components/MenuBar.vue'
import PageFooter from '@/components/PageFooter.vue'
import ArticleCard from '@/components/ArticleCard.vue'

export default {
	components: {
		MenuBar,
		PageFooter,
		ArticleCard
	},
	data() {
		return {
		  category:'0',
			articles: [],
      loading: false,
		}
	},
	created() {
    this.getArticle();
	},
	methods: {
    handleClick(tab, event) {
      console.log(tab.index, event);
      this.category = tab.index;
      this.getArticle();
    },

    getArticle(){
      this.loading = true;
      this.axios.get("/article/get-all-list?categoryId=" + this.category).then(({data}) => {
        if (data.state == 20000) {
          this.articles = data.data;
          this.loading = false;
        } else {
          this.$message.error(data.message);
        }
      });
    },


	},
}
</script>

<style>
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  position: relative;
}


* {
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
		"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
